<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 提示语 警告区域-->
    <el-alert
      class="el-icon-warning"
      title="注意：只允许为第三级分类设置相关参数！"
      type="warning"
    >
    </el-alert>
    <!-- select级联菜单 -->
    <el-row>
      <el-col :span="4"> <span class="sp1">选择商品分类:</span></el-col>
      <el-col :span="5">
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"
          :props="{
            expandTrigger: 'hover',
            value: 'cat_id',
            label: 'cat_name',
          }"
        ></el-cascader>
      </el-col>
    </el-row>
    <!-- 标签页 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="only">
        <el-row>
          <el-col :span="4">
            <el-button type="primary" @click="modl">添加参数</el-button>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column type="expand">
            <!-- v-for="tag in scope.row.attr_vals " 此时拿到的数据是分开的 需要将字符串变成数组 用split -->
            <template slot-scope="scope">
            <el-tag
              :key="tag"
              v-for="(tag,index) in scope.row.attr_vals"
              closable
              :disable-transitions="false"
              @close="handleClose(scope.row,index)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="scope.row.inputVisible"
              v-model="scope.row.inputValue"  
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm(scope.row)"
              @blur="handleInputConfirm(scope.row)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(scope.row)"
              >+ New Tag</el-button
            >
            </template>
          </el-table-column>
          <el-table-column label="参数名称" prop="attr_name"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.row)"
              ></el-button>
              <el-button type="primary" icon="el-icon-edit"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加参数对话框 -->
        <el-dialog title="添加动态参数" :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="动态参数" prop="attr_name">
              <el-input v-model="form.attr_name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addattr()">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="many">
        <el-row>
          <el-col :span="4">
            <el-button type="primary" @click="modl">添加属性</el-button>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column type="expand">
            <template slot-scope="scope">
            <el-tag
              :key="tag"
              v-for="(tag,index) in scope.row.attr_vals"
              closable
              :disable-transitions="false"
              @close="handleClose(scope.row,index)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="scope.row.inputVisible"
              v-model="scope.row.inputValue"  
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm(scope.row)"
              @blur="handleInputConfirm(scope.row)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(scope.row)"
              >+ New Tag</el-button
            >
            </template>
          </el-table-column>
          <el-table-column label="参数名称" prop="attr_name"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.row)"
              ></el-button>
              <el-button type="primary" icon="el-icon-edit"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加属性对话框 -->
        <el-dialog title="添加动态参数" :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="动态参数" prop="attr_name">
              <el-input v-model="form.attr_name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addattr()">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { attrlist, cateList, delAttr, addAtt,updateAttr } from "../../utils/api";
export default {
  data() {
    return {
        // dynamicTags: ['标签一', '标签二', '标签三'],
        // inputVisible: false,
        // inputValue: '',
      // 添加参数对话框
      dialogFormVisible: false,
      // 模态框form
      form: {
        attr_name: "",
        attr_sel: "only",
      },
      // 商品分类所有数据
      options: [],
      // v-model数据双向绑定到一个数组
      value: [],
      activeName: "only",
      // 表格数据
      tableData: [
        //  {
        //     "attr_id": 1,
        //     "attr_name": "cpu1",
        //     "cat_id": 11,
        //     "attr_sel": "only",
        //     "attr_write": "manual",
        //     "attr_vals": "ffff   aa"
        // },
        //   {
        //     "attr_id": 2,
        //     "attr_name": "cpu2",
        //     "cat_id": 22,
        //     "attr_sel": "only",
        //     "attr_write": "manual",
        //     "attr_vals": "ffff  bb"
        // }
      ],
      rules: {
        attr_name: [
          { required: true, message: "请输入参数", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },

  // 获取分类参数所有的数据
  mounted() {
    this.getlist();
  },

  methods: {
    async getlist() {
      var res = await cateList();
      if (res.data.meta.status == 200) {
        this.$message.success(res.data.meta.msg);
      }
      this.options = res.data.data;
    },

    // 获取表格数据 级联选择器里面的内容
    async handleChange() {
      var obj = { sel: this.activeName };
      var id = this.value[this.value.length - 1];
      var res = await attrlist(id, obj);
      console.log(9999, res);
      // this.tableData = res.data.data;  对原始数据增加scope.row.inputValue属性 因为每行没有这个属性
        // 对原始数据进行处理 解决作用域的问题
        let res1 = JSON.parse(JSON.stringify(res.data.data)) 
      res.data.data.forEach(item=>{
        item.attr_vals=item.attr_vals?item.attr_vals.split(' '):[] , //如果里面有字符串就把他改变成数组 如果没有数据就为空
        item.inputValue = ""
        item.inputVisible = false
      })
      this.tableData = res.data.data
      console.log("处理后数据",res);
    },

    //点击添加参数 弹出模态框
    modl() {
      this.dialogFormVisible = true;
    },
    // 标签页点击事件
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 删除属性参数
    async del(res) {
      console.log(8989, res);
      var res = await delAttr(res.cat_id, res.attr_id);
      console.log(998099, res);
      this.getlist();
      this.handleChange();
    },

    //  添加
    async addattr() {
      if (this.activeName == "only") {
        this.form.attr_sel == "many";
      } else {
        this.form.attr_sel == "only";
      }
      var res = await addAtt(this.value[this.value.length - 1], this.form);
      console.log(444, res);
      this.dialogFormVisible = false;
      // var obj={sel:this.activeName}
      //   var id=this.value[this.value.length-1]
      //   var res = await attrlist(id,obj)
      //   console.log( 9999,res);
      //   this.tableData = res.data.data
      this.getlist();
      // 调用联选择器的接口
    },

    // 删除展开列的参数可选项
     async handleClose(row,index) {
        row.attr_vals.splice(index,1)

        // 请求接口
        var res = await updateAttr({
          id:row.cat_id,
          attr_id:row.attr_id,
          attr_name:row.attr_name,
          attr_sel:this.activeName,
          attr_vals:row.attr_vals.join(' ')
        })
        console.log("删除成功",res);
        if(res.data.meya.status==200){
          this.$message.success(res.data.meta.msg)
        }
      },
      // 点击按钮 显示出文本框
        showInput(row) {
        row.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
    // 文本框失去焦点  当前行的
     async handleInputConfirm(row) {
        let inputValue = row.inputValue;
        if (inputValue) {
         row.attr_vals.push(inputValue);
        }
        row.inputVisible = false;
        row.inputValue = '';
        // 请求接口数据
        var res = await updateAttr({
          id:row.cat_id,
          attr_id:row.attr_id,
          attr_name:row.attr_name,
          attr_sel:this.activeName,
          attr_vals:row.attr_vals.join(' ')
        })
        if(res.data.meya.status==200){
          this.$message.success(res.data.meta.msg)
        }
      }
  },
};
</script>
<style lang="scss">
.el-alert {
  margin-top: 20px;
}

.sp1 {
  font-size: 19px;
}

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
